import React, { Component } from 'react';
import axios from 'axios';
import ETable from './../../components/BaseForm'
import BaseForm from './../../components/ETable'
import {Card,Modal, Buton, Select, message,Form,Button,Table,DatePicker, Radio} from 'antd';

const Option = Select.Option;
const FormItem = Form.Item;
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
export default class Order extends Component {
    state={
        list:[],
        formItemLaout:""
       
    }
    componentWillMount() {
        this.requerList()
    }
  
    requerList = () => {
        axios.get("https://www.studyinghome.com/mock/5e4ca5d80167590746b7615d/example/table/order")
        .then(res => {
            let list = res.data.result.list
                this.setState({
                    list
                })
        })
    }
    handleOrderList = () =>{
        message.success("结束成功")
        this.setState({
            isVisibleItem:false
        })
    }
    openOrderDetail = () =>{
        let item = this.state.selectedItem
      //  console.log(item)
        if(!item) {
            Modal.info({
                title:"信息",
                content:"请选择一个数据"
            })
            return
        }
         window.open(`/#/common/order/detail/${item.mobile}`,'_blank')
    }
    handleFinish = () => {
        let item = this.state.selectedItem
      
        if(!item) {
            Modal.info({
                title:"信息",
                content:"请选择一个数据"
            })
            return
        }
      
        this.setState({
            isVisibleItem:true,
            rowItem:item
        })
       
    }
    onRowClick = (record,index) => {
        let selectKey=[index];
        this.setState({
            selectedRowKeys:selectKey,
            selectedItem: record
        })
    }
    render() {
        const columns = [ 
                        {
                            title:'订单编号',
                            dataIndex:'order_sn'
                        },
                        {
                            title: '车辆编号',
                            dataIndex: 'bike_sn'
                        },
                        {
                            title: '用户名',
                            dataIndex: 'user_name'
                        },
                        {
                            title: '手机号',
                            dataIndex: 'mobile'
                        },
                        {
                            title: '里程',
                            dataIndex: 'distance',
                            // render(distance){
                            //     return distance/1000 + 'Km';
                            // }
                        },
                        {
                            title: '行驶时长',
                            dataIndex: 'total_time'
                        },
                        {
                            title: '状态',
                            dataIndex: 'status'
                        },
                        {
                            title: '开始时间',
                            dataIndex: 'start_time'
                        },
                        {
                            title: '结束时间',
                            dataIndex: 'end_time'
                        },
                        {
                            title: '订单金额',
                            dataIndex: 'total_fee'
                        },
                        {
                            title: '实付金额',
                            dataIndex: 'user_pay'
                        }
                    ]
                    const rowSelection = {
                        type:"radio",
                        selectedRowKeys:this.state.selectedRowKeys
                    }
                    const formItemLaout ={
                        label:{span:4},
                        wrapper:{span:12}
                    }
        return (
            <div>
                <Card 
                    title="订单管理"
                >
                    <FilterForm/>
                </Card>
                <Card>
                     <Button onClick={this.openOrderDetail} type="primary" style={{margin:"0 20px"}}>订单查询</Button>
                    <Button onClick={this.handleFinish}  type="primary">结束订单</Button>
                </Card>
                <Table
                    columns={columns}
                    dataSource={this.state.list}
                    bordered
                    rowSelection={rowSelection}
                    onRow={(record,index) => {
                        return{
                            onClick:()=> {
                                this.onRowClick(record,index);
                            }
                        }
                    }}
                >

                </Table>
                <Modal
                    title="结束订单"
                    visible={this.state.isVisibleItem}
                    onOk={this.handleOrderList}
                    onCancel={() => {
                        this.setState({
                            isVisibleItem:false
                        })
                    }}
                >
                    <FormListItem rowItem={this.state.rowItem}/>
                </Modal>
            </div>
        )
    }
}
class FilterForm extends Component{
    reset = () => {
        this.props.form.resetFields();
    }
    handleFilterSubmit = (filterParams) => {
        this.params = filterParams;
        this.requestList();
    };
    render() {
        const { getFieldDecorator} = this.props.form;
        return(
            <Form layout="inline">                
                 <FormItem label="请选择城市">
                    {
                        getFieldDecorator('city',{
                            initialValue:"1"
                        })(
                            <Select style={{width:"120px"}}>
                                <Option value="1">请选择城市</Option>
                                <Option value="2">北京</Option>
                                <Option value="3">上海</Option>
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem label="时间">
                    {
                        getFieldDecorator("time")(
                            <RangePicker/>
                        )
                    }
                </FormItem>
                <FormItem label="订单状态" >
                    {
                        getFieldDecorator('city_id',{
                            initialValue:"1"
                        })(
                            <Select style={{width:"120px"}}>
                                <Option value="1">请选择状态</Option>
                                <Option value="2">已授权</Option>
                                <Option value="3">未授权</Option>
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem>
                    <Button type="primary" style={{margin:"0 20px"}} filterSubmit={this.handleFilterSubmit}>查询</Button>
                    <Button type="primary" onClick={this.reset}>重置</Button>
                </FormItem> 
            </Form>
        )
    }
}
FilterForm=Form.create({})(FilterForm);
class FormListItem extends Component{
    render() {
       const rowItem = this.props.rowItem
        console.log(rowItem)
        const { getFieldDecorator} = this.props.form;
        const labelList = {
            labelCol:{span:4},
            wrapperCol:{span:12}
        }
        return (
            <Form layout="horizontal">
                <FormItem label="订单编号" {...labelList}>
                    {
                        getFieldDecorator('order_sn')(
                        <div>{rowItem.order_sn}</div>
                        )
                    }
                </FormItem>
                <FormItem label="车辆编号" {...labelList}>
                    {
                        getFieldDecorator('bike_sn')(
                            <div>{rowItem.bike_sn}</div>
                        )
                    }
                </FormItem>
                <FormItem label="用户名" {...labelList}>
                    {
                        getFieldDecorator('user_name')(
                            <div>{rowItem.user_name}</div>
                        )
                    }
                </FormItem>
                <FormItem label="手机号'" {...labelList}>
                    {
                        getFieldDecorator('mobile')(
                            <div>{rowItem.mobile}</div>
                        )
                    }
                </FormItem>
                <FormItem label="里程" {...labelList}>
                    {
                        getFieldDecorator('distance')(
                            <div>{rowItem.distance}</div>
                        )
                    }
                </FormItem>
                <FormItem label="行驶时长 " {...labelList}>
                    {
                        getFieldDecorator('total_time')(
                            <div>{rowItem.total_time}</div>
                        )
                    }
                </FormItem>
                <FormItem label="状态" {...labelList}>
                    {
                        getFieldDecorator('status')(
                            <div>{rowItem.status}</div>
                        )  
                    }
                </FormItem>

            </Form>
        )
    }
}
FormListItem=Form.create({})(FormListItem)
// import React from 'react';
// import {Card,Modal, Buton, Select, message,Form,Button,Table,DatePicker, Radio} from 'antd';
// import axios from 'axios';
// // import Utils from './../../utils/utils'; 
// // import BaseForm from '../../components/BaseForm/index';
// // import ETable from '../../components/ETable';

// const FormItem = Form.Item
// const Option = Select.Option
// const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
// export default class One extends React.Component{
//     state = {
//         list:[],
//         orderInfo:{},
//         orderConfirmVisible:false
//     }
//     //结束订单
//     handleFinish = () => {
//         let item = this.state.selectedItem
      
//         if(!item) {
//             Modal.info({
//                 title:"信息",
//                 content:"请选择一个数据"
//             })
//             return
//         }
//         axios.get("https://www.studyinghome.com/mock/5e4ca5d80167590746b7615d/example/order/bike")
//         .then((res) => {
         
//             if(res.data.code == 0) {
//                 this.setState({
//                     orderConfirmVisible:true,
//                     orderInfo:res.data.result
//                 })
               
//             }
//         })
//     }
//     handleFinishOrder =() => {
       
//         message.success("订单结束")
//         this.setState({
//             orderConfirmVisible:false
//         })
//     }
//     //详情
//     openOrderDetail = () =>{
//         let item = this.state.selectedItem
//         console.log(item)
//         if(!item) {
//             Modal.info({
//                 title:"信息",
//                 content:"请选择一个数据"
//             })
//             return
//         }
//          window.open(`/#/common/order/detail/${item.mobile}`,'_blank')
//     }
//     onRowClick = (record, index) => {
//         // console.log(record)
//         let selectKey=[index];
//         this.setState({
//             selectedRowKeys:selectKey,
//             selectedItem: record
//         })
//     }
//     componentWillMount() {
//         axios.get("https://www.studyinghome.com/mock/5e4ca5d80167590746b7615d/example/table/order").then((res) => {
//             let list = res.data.result.list
//             this.setState({
//                 list
//             })
//         })
//     }
//     render() {
//         const columns = [ 
//             {
//                 title:'订单编号',
//                 dataIndex:'order_sn'
//             },
//             {
//                 title: '车辆编号',
//                 dataIndex: 'bike_sn'
//             },
//             {
//                 title: '用户名',
//                 dataIndex: 'user_name'
//             },
//             {
//                 title: '手机号',
//                 dataIndex: 'mobile'
//             },
//             {
//                 title: '里程',
//                 dataIndex: 'distance',
//                 // render(distance){
//                 //     return distance/1000 + 'Km';
//                 // }
//             },
//             {
//                 title: '行驶时长',
//                 dataIndex: 'total_time'
//             },
//             {
//                 title: '状态',
//                 dataIndex: 'status'
//             },
//             {
//                 title: '开始时间',
//                 dataIndex: 'start_time'
//             },
//             {
//                 title: '结束时间',
//                 dataIndex: 'end_time'
//             },
//             {
//                 title: '订单金额',
//                 dataIndex: 'total_fee'
//             },
//             {
//                 title: '实付金额',
//                 dataIndex: 'user_pay'
//             }
//         ]
//         const formItemLaout = {
//             labelCol:{span:5},
//             wrapperCol:{span:10}
//         }
//         const selectedRowKeys = this.state.selectedRowKeys
//         const rowSelection = {
//             type:"radio",
//             selectedRowKeys
//         }
//         return(
//             <div>
//                 <Card title="订单管理" className="card-wrap">
//                    <FilterFrom />
//                 </Card>
//                 <Card className="card-wrap">
//                 <Button type="primary" onClick={this.openOrderDetail} 

// style={{margin:"0 20px"}}>订单详情</Button>
//                 <Button type="primary" onClick={this.handleFinish} style=

// {{margin:"0 20px"}}>结束订单</Button>
//                 </Card>
//                 <Table
//                     bordered
//                     columns={columns}
//                     dataSource={this.state.list}
//                     rowSelection={rowSelection}
//                     onRow={(record, index) => {
//                         return{
//                             onClick:()=> {
//                                 this.onRowClick(record,index);
//                             }
//                         }
//                     }}
//                 >

//                 </Table>
//                 <Modal
//                     title="订单结束"
//                     visible={this.state.orderConfirmVisible}
//                     width={600}
//                     onCancel={() => {
//                         this.setState({
//                             orderConfirmVisible:false
//                         })
//                     }}
//                     onOk={this.handleFinishOrder}
//                 >
//                     <Form layout="horizontal">
//                         <FormItem label="车辆编号" {...formItemLaout}>
//                           {this.state.orderInfo.id}
//                         </FormItem>
//                         <FormItem label="剩余电量" {...formItemLaout}>
//                            {this.state.orderInfo.battery + "%"}
//                         </FormItem>
//                         <FormItem label="行程开始时间" {...formItemLaout}>
//                             {this.state.orderInfo.start_time}
//                         </FormItem>
//                         <FormItem label="当前位置" {...formItemLaout}>
//                             {this.state.orderInfo.start_time}
//                         </FormItem>
//                     </Form>
//                 </Modal>
//             </div>
//         )
//     }
// }
// class FilterFrom extends React.Component{
//     render() {
//         const { getFieldDecorator} = this.props.form;
//         return(
//             <div>
//                 <Form layout="inline">
//                     <FormItem label="请选择城市" >
//                         {
//                             getFieldDecorator('city_id',{
//                                 initialValue:'1'
//                             })(
//                                 <Select placeholder="全部" style={{width:100}}>
//                                     <Option value="1">全部</Option>
//                                     <Option value="2">北京市</Option>
//                                     <Option value="3">天津市</Option>
//                                  </Select>
//                             )
//                         }
//                     </FormItem>
//                     <FormItem>
//                         <RangePicker  />
                      
//                     </FormItem>

//                     <FormItem label="订单状态" >
//                         {
//                             getFieldDecorator('city_id',{
//                                 initialValue:'1'
//                             })(
//                                 <Select placeholder="全部" style={{width:100}}>
//                                     <Option value="1">全部</Option>
//                                     <Option value="2">已授权</Option>
//                                     <Option value="3">未授权</Option>
//                                  </Select>
//                             )
//                         }
//                     </FormItem>
//                     <FormItem >
//                         <Button type="primary" style={{margin:"0 20px"}}>查

// 询</Button>
//                         <Button>重置</Button>
//                     </FormItem>
//                 </Form>
//             </div>
//         )
//     }
// }
// FilterFrom = Form.create({})(FilterFrom)